<template>
	<scroll-view  scroll-y="true"  class="groupinfo" @scroll = "onscroll" @tap = "closefiriendlist"
	>		
		<view class="bgcover">
			<image src="../../static/images/commom/bgimg.jpeg" class="bgimg" mode="widthFix"></image>
		</view>
		<view class="header" id="header" :class="{upper:headerflag}" :style="{marginTop:systemBarHeight+'px'}">
			<image src="../../static/images/commom/whiteback.png" v-show="!headerflag" class="btn back" @tap="oneback"></image>
			<image src="../../static/images/commom/whitemore.png" v-show="!headerflag" class="btn more"></image>
			
			<image src="../../static/images/commom/back.png" v-show="headerflag" class="btn back" @tap="oneback"></image>
			<image src="../../static/images/commom/more.png" v-show="headerflag" class="btn more"></image>
		</view>
		<view class="empty" id="empty">
			
		</view>
		<view class="infocontainer">
			<view class="top">
				<view class="head">
					<view class="name">
						{{groupinfo.name}}
					</view>
					<view class="time">
						{{groupinfo.time}}
					</view>
				</view>
				<view class="desc">
					{{groupinfo.notice}}
				</view>
			</view>
			<view class="middle">
				<view class="head">
					<view class="name">
						群成员
					</view>
					<view class="control" v-if="user.id == gownerid">
						成员管理
						<image src="../../static/images/commom/right.png" class="img"></image>
					</view>
				</view>
				<!-- <scroll-view scroll-y="true" class="memberlist"> -->
				<view class="memberlist">
					<view class="memberitem" v-for="(item,index) in groupinfo.list" :key = "index">
						<view class="img">
							<image :src = "item.imgurl" class="myimg"></image>
							<view class="delete" @tap="deletemember(item)" v-if="user.id == gownerid && item.id != gownerid">
								<image src="../../static/images/commom/deleteuser.png" class="deleteimg"></image>
							</view>
						</view>					
						<view class="name">
							{{item.name}}
						</view>
					</view>
					<view class="memberitem addmember" @tap.stop = "addgroupuser">
						<view class="img">
							<image src="../../static/images/commom/addmember.png" class="myimg"></image>
						</view>					
						<view class="name">
							邀请
						</view>
					</view>
				<!-- </scroll-view> -->
				</view>
				<view class="groupinfodetail">			
					<view class="info groupname">
						<view class="text">
							群名称
						</view>
						<view class="middle">
							{{groupinfo.name}}
						</view>
						<image src="../../static/images/commom/right.png" class="img right"
						v-if="user.id == gownerid"
						@tap="openchange('群名称')"></image>
					</view>
					<view class="info head">
						<view class="text">
							头像
						</view>
						<view class="middle">
							<image :src="cropFilePath" class="img" v-if="user.id != gownerid"></image>
							<image-cropper :src="tempFilePath" @confirm="confirm"  @cancel="cancel" v-if="user.id == gownerid"></image-cropper>
							<image :src="cropFilePath" @tap="upload" class="img meslist_img" v-if="user.id == gownerid"></image>
						</view>
					</view>
					<view class="info groupnotic">
						<view class="text">
							群公告
						</view>
						<view class="middle">
							{{groupinfo.notice}}
						</view>
						<image src="../../static/images/commom/right.png" class="img right"
						v-if="user.id == gownerid"
						@tap="openchange('群公告')"></image>
					</view>
					<view class="info groupinnername">
						<view class="text">
							群内名
						</view>
						<view class="middle">
							{{groupinfo.innername}}
						</view>
						<image src="../../static/images/commom/right.png" class="img right"
						@tap="openchange('群内名')"></image>
					</view>
					<view class="info grouprecived">
						<view class="text norecived">
							消息免打扰
						</view>
						<view class="middle">
							
						</view>
						<view class="img right myswitch">
							<myswich :flag = "groupinfo.shield" @changeisrecived = "changeisrecived"></myswich>
						</view>
					</view>
				</view>
			</view>
			<view class="bottom" v-if="user.id != gownerid" @tap.stop = "outgroup">
				退出群聊
			</view>
			<view class="bottom" v-if="user.id == gownerid" @tap.stop = "deletegroup">
				解散该群
			</view>
		</view>
		<transition name="fade">
			<infochange v-show="changeflag" 
			:title = "title"
			:value = "value"
			@close = "close"
			@decide = "decide"></infochange>
		</transition>
		<scroll-view class="addfriendlist" :animation="animationData">
			<view class="useritem" v-for="(item,index) in friendlist" :key = "index" >
				<view class="left">
					<image class="img" :src="item.imgurl"></image>
				</view>
				<view class="right">
					<view class="name" >
						<view class="user" v-html="item.name">	
						</view>
					</view>
					<view class="btn add"  @tap.stop="addfriend(item)">
						加群
					</view>
				</view>
			</view>
		</scroll-view>
	</scroll-view>
</template>

<script>
	import ImageCropper from "@/components/ling-imgcropper/ling-imgcropper.vue";
	import mydata from "../../commoms/data/data.js"
	import myfunc from "../../commoms/js/myfunction.js"
	import myswich from "../../components/switch/switch.vue"
	import infochange from "../../components/infochange/infochange.vue"
	export default {	
		data() {
			return {
				groupinfo:{},//群详细信息
				user:{},//用户的信息包括token
				title:'',
				value:'',
				gid:'',//群id
				gownerid:'',//群主id
				changeflag:false,
				tempFilePath: "",
				cropFilePath: "",
				elementinfo:'',
				headerflag:false,
				animationData: {},//动画效果
				animation:'',
				friendlist:[],//未加入群的好友
				systemBarHeight:''
			};
		},
		onLoad(e){
			this.gid = e.id
			// this.getmemberlist()
			this._gettoken()
			this._getgroupinfo()
			this.getSysteminfo();
		},
		methods:{
			getSysteminfo() {//获取系统栏高度
				uni.getSystemInfo({
					success: (res) => {
						this.systemBarHeight = res.statusBarHeight;
					}
				});
			},
			_gettoken(){//获取用户信息和token值
				try{
				    const value = uni.getStorageSync('wikiuser');
				    if (value) {
				      this.user = JSON.parse(value);
				    }
				}
				catch(e){
				   console.log(e)
				}
			},
			_getfriendlist(){//获取当前未进群的好友列表
				uni.request({
					url:this.serverurl+"index/getusers",
					data:{
						uid:this.user.id,
						state:0,
						token:this.user.token
					},
					method:'POST',
					success:(res)=>{
						let info = res.data;					
						if(info.status == 200){
							let needlist = []
							let list = info.data;
							for(var i = 0;i<list.length;i++){
								let obj = list[i];
								let falg = false;
								for(var j = 0;j<this.groupinfo.list.length;j++){
									let innerobj = this.groupinfo.list[j];
									if(obj.id == innerobj.id){
										falg = true;
										break;
									}
								}
								if(!falg){
									obj.imgurl = this.serverurl+`userimage/${obj.imgurl}`;
									needlist.push(obj);
								}
							}
							this.friendlist = needlist;
						}else if(info.status == 300){
							uni.navigateTo({//token过期
								url:"../llogin/llogin?name="+this.user.name
							})
						}					
					},
				})
			},
			_getgroupinfo(){//获取群详细信息
				uni.request({
					url:this.serverurl+"group/groupdetail",
					data:{
						gid:this.gid,
						token:this.user.token
					},
					method:'POST',
					success:(res)=>{	
						let info = res.data;
						if(info.status == 200){
							let groupinfo = info.data;
							if(!groupinfo){return}
							this.gownerid = groupinfo.userID;//群主的id值
							groupinfo.imgurl = this.serverurl+`group/${groupinfo.imgurl}`;
							this.cropFilePath = groupinfo.imgurl;
							groupinfo.time = myfunc.gettime(groupinfo.time);
							for(var i = 0;i<groupinfo.list.length;i++){
								let obj = groupinfo.list[i];
								obj.imgurl = this.serverurl+`userimage/${obj.imgurl}`;
							}
							this._getgroupuserinfo().then((data)=>{
								groupinfo.innername = data.name;
								groupinfo.shield = data.shield==0 ? true : false;
								this.groupinfo = groupinfo;
								console.log(this.groupinfo)
							})						
						}else if(info.status == 300){
							uni.navigateTo({//token过期
								url:"../llogin/llogin?name="+this.user.name
							})
						}
					}
				})
			},
			_getgroupuserinfo(){//获取群个人信息
				return new Promise((resolve,reject)=>{
					uni.request({
						url:this.serverurl+'group/groupuserinfo',
						data:{
							gid:this.gid,
							uid:this.user.id,
							token:this.user.token
						},
						method:'POST',
						success: (result) => {
							let info = result.data;
							if(info.status == 200){
								resolve(info.data)
								this.changeflag = false;
							}
							else if(info.status == 300){
								uni.navigateTo({//token过期
									url:"../llogin/llogin?name="+this.user.name
								})
							}
						}
					})
				})
			},
			onscroll(e){
				const query = uni.createSelectorQuery().in(this);
				query.select(`#header`).boundingClientRect(data => {			 
				   this.getelementinfo('empty');
				   let emptyheight = this.elementinfo.height
				   if((e.detail.scrollTop + data.height) > emptyheight){
				   	this.headerflag = true
				   }else{
				   	this.headerflag = false
				   }
				}).exec()	
						
			},
			getelementinfo(id){
				const query = uni.createSelectorQuery().in(this);
				query.select(`#${id}`).boundingClientRect(data => {
				  this.elementinfo =  data
				   
				}).exec()	
			},
			upload() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camrea'], //从相册选择
					success: (res) => {
						this.tempFilePath = res.tempFilePaths.shift()
					}
				});
			},
			confirm(e) {
				this.tempFilePath = ''
				this.cropFilePath = e.detail.tempFilePath
				uni.uploadFile({
					url: this.serverurl+'files/upload',
					filePath: this.cropFilePath,
					name: "file",
					fileType: "image",
					formData:{
						'url':'group',
						'name':(new Date()).getTime()+this.user.id,
					},
					success: (uploadFileRes) => {
					  var backstr = JSON.parse(uploadFileRes.data);
					  this._updatainfo('imgurl',backstr.filename)
					},
					fail(e) {
					  // console.log("this is errormes " + e.message);
					},
				  });
			},
			cancel() {
				// console.log('canceled')
			},
			openchange(title){
				this.title = title;
				if(title === "群名称"){
					this.value = this.groupinfo.name
				}else if(title === "群公告"){
					this.value = this.groupinfo.notice
				}else if(title === "群内名"){
					this.value = this.groupinfo.innername
				}
				this.changeflag = true;
			},
			close(flag){
				this.changeflag = flag;
			},
			decide(title,text){//修改群内信息
				// console.log(title,text)
				if(title === "群名称"){
					this._updatainfo('name',text)
					this.groupinfo.name = text
				}else if(title === "群公告"){
					this._updatainfo('notice',text)
					this.groupinfo.notice = text
				}else if(title === "群内名"){
					this.groupinfo.innername = text
					this._updatauserinfo('name',text)
				}
			},
			_updatauserinfo(type,mydata){//提交修改群个人信息
				uni.request({
					url:this.serverurl+'group/groupuserupdate',
					data:{
						gid:this.gid,
						uid:this.user.id,
						type,
						data:mydata
					},
					method:'POST',
					success: (result) => {
						let info = result.data;
						if(info.status == 200){
							uni.showToast({
							    title: '修改成功',
							    duration: 2000,
								icon:'none',
								position:'top'
							});
							this.changeflag = false;
						}else if(info.status == 500){
							uni.showToast({
							    title: '修改失败',
							    duration: 2000,
								icon:'none',
								position:'top'
							});
						}
						else if(info.status == 300){
							uni.navigateTo({//token过期
								url:"../llogin/llogin?name="+this.user.name
							})
						}
					}
				})
			},
			_updatainfo(type,mydata){//提交修改信息
				uni.request({
					url:this.serverurl+'group/groupupdate',
					data:{
						gid:this.gid,
						type,
						data:mydata
					},
					method:'POST',
					success: (result) => {
						let info = result.data;
						if(info.status == 200){
							uni.showToast({
							    title: '修改成功',
							    duration: 2000,
								icon:'none',
								position:'top'
							});
							this.changeflag = false;
						}else if(info.status == 500){
							uni.showToast({
							    title: '修改失败',
							    duration: 2000,
								icon:'none',
								position:'top'
							});
						}
						else if(info.status == 300){
							uni.navigateTo({//token过期
								url:"../llogin/llogin?name="+this.user.name
							})
						}
					}
				})
			},
			oneback(){
				uni.navigateBack({
				    delta: 2
				});
			},
			addgroupuser(){//添加群成员动画，打开添加好友到群列表
				var animation = uni.createAnimation({
					duration: 1000,
					timingFunction: 'ease',
				})		
				this.animation = animation;
				animation.translateY(0).step();
				this.animationData = animation.export();
				this._getfriendlist();
			},
			addfriend(item){//添加好友进群
				uni.request({
					url:this.serverurl+'group/addgroupuser',
					data:{
						groupID:this.gid,
						userID:item.id,
						time:new Date(),
						lasttime:new Date(),
						token:this.user.token
					},
					method:'POST',
					success: (result) => {
						let info = result.data;
						if(info.status == 200){
							uni.showToast({
							    title: '添加成功',
							    duration: 2000,
								icon:'none',
								position:'top'
							});
							this.groupinfo.list.push(item)
							var myindex = this.friendlist.findIndex((myitem, index) => {
							    return myitem.id == item.id;
							})
							this.friendlist.splice(myindex,1)
						}else if(info.status == 300){
							uni.navigateTo({//token过期
								url:"../llogin/llogin?name="+this.user.name
							})
						}
					}
				})
			},
			closefiriendlist(){//关闭添加好友到群列表
				var animation = uni.createAnimation({
					duration: 1000,
					timingFunction: 'ease',
				})		
				this.animation = animation;
				animation.translateY('100%').step();
				this.animationData = animation.export();
			},
			deletemember(item){//删除群成员
				uni.request({
					url:this.serverurl+'group/deletegroupuser',
					data:{
						token:this.user.token,
						gid:this.gid,
						uid:item.id
					},
					method:'POST',
					success: (result) => {
						let info = result.data;
						if(info.status == 200){
							for(var i = 0;i<this.groupinfo.list.length;i++){
								let obj = this.groupinfo.list[i]
								if(obj.id == item.id){
									this.groupinfo.list.splice(i,1)
								}
							}
							uni.showToast({
							    title: '删除成功',
							    duration: 2000,
								icon:'none',
								position:'top'
							});
						}else if(info.status == 300){
							uni.navigateTo({//token过期
								url:"../llogin/llogin?name="+this.user.name
							})
						}
					}
				})	
			},
			outgroup(){//退出群聊
				uni.request({
					url:this.serverurl+'group/outgroup',
					data:{
						token:this.user.token,
						gid:this.gid,
						uid:this.user.id
					},
					method:'POST',
					success: (result) => {
						let info = result.data;
						if(info.status == 200){
							uni.navigateTo({//删除成功后返回好友列表
								url:"../friendslist/friendslist"
							})
						}else if(info.status == 300){
							uni.navigateTo({//token过期
								url:"../llogin/llogin?name="+this.user.name
							})
						}
					}
				})	
			},
			deletegroup(){//删除群
				uni.request({
					url:this.serverurl+'group/deletegroup',
					data:{
						token:this.user.token,
						gid:this.gid,
					},
					method:'POST',
					success: (result) => {
						let info = result.data;
						if(info.status == 200){
							uni.navigateTo({//删除成功后返回好友列表
								url:"../friendslist/friendslist"
							})
						}else if(info.status == 300){
							uni.navigateTo({//token过期
								url:"../llogin/llogin?name="+this.user.name
							})
						}
					}
				})	
			},
			changeisrecived(flag){//修改是否接收群数据
				let value = flag ? 0 : 1;
				this.groupinfo.shield = flag;
				this._updatauserinfo('shield',value)
			},
			getmemberlist(){//模拟数据
				let datalist = this.groupinfo.memberlist
				for(var i = 0;i<datalist.length;i++){
					let item = datalist[i];
					item.imgurl = `../../static/images/userimg/pic_${item.imgurl}.jpg`
				}
				this.groupinfo.memberlist = datalist;
			}
		},
		components:{
			myswich,
			infochange,
			ImageCropper
		}
	}
</script>

<style lang="scss">
.groupinfo{
	position: fixed;
	top: 0;
	bottom: 0;
	width: 100%;
	// padding-top: var(--status-bar-height);
	// padding-bottom: env(safe-area-inset-bottom); 
	.addfriendlist{
		position: fixed;
		width: 100%;
		max-height: 60%;
		bottom: 0rpx;
		background-color: #FAFAFA;
		transform: translateY(100%);
		border-top-right-radius: 38rpx;
		border-top-left-radius: 38rpx;
		padding: 28rpx 0;
		.useritem{
			padding: 0 28rpx;
			height: 104rpx;
			display: flex;
			margin-bottom: 24rpx;
			
			.left{
				height: 100%;
				display: inline-block;
				.img{
					box-sizing: border-box;
					width: 104rpx;
					height: 104rpx;
					border-radius: 34rpx;
					border: 4rpx solid rgba(52, 199, 88, 100);
					background-color:#9CFF2D55 ;
				}
			}
			.right{
				display: inline-block;
				flex: 1;
				display: flex;
				align-items: center;
				padding-left: 28rpx;
				justify-content: space-between;
				.name{
					color: rgba(16, 16, 16, 100);
					font-size: $uni-font-size-lg;		
					font-size: 36rpx;
					.user{
						font-weight: bold;
					}
				}
				.btn{
					width: 146rpx;
					height: 56rpx;
					line-height: 56rpx;;
					border-radius: $uni-border-radius-lg;						
					font-size: $uni-font-size-base;
					text-align: center;
					font-family: Arial;	
					font-weight: bold;
					border: 1px solid rgba(187, 187, 187, 100);
					&.add{
						background-color: rgba(229, 229, 234, 100);
						color: rgba(90, 200, 250, 100);
					}
				}
			}
		}
	}
	.header{
		position: fixed;
		top: 0;
		height: 120rpx;
		width: 100%;
		padding: 0 42rpx;
		display: flex;
		box-sizing: border-box;
		justify-content: space-between;
		align-items: center;
		z-index: 1200;
		transition: all 0.3s ease;
		&.upper{
			background-color: #FFFFFF;
		}
		.btn{
			width: 48rpx;
			height: 48rpx;
			&.more{
				width: 72rpx;
				height: 72rpx;
			}
		}
	}
	.bgcover{
		position: fixed;
		top: 0;
		width: 100%;
		z-index: -1;
		.bgimg{
			width: 100%;
		}
	}
	.empty{
		width: 100%;
		height: 400rpx;
	}
	.infocontainer{
		// position: absolute;
		// top: 22%;
		// bottom: 0;
		width: 100%;
		background-color: #FFFFFF;
		border-top-right-radius: 40rpx;
		border-top-left-radius: 40rpx;
		overflow: hidden;
		.top{	
			margin-bottom: 30rpx;
			.head{
				padding: 30rpx 25rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.name{
					color: rgba(74, 71, 71, 100);
					font-size: 48rpx;
					font-weight: bold;
				}
				.time{
					color: rgba(158, 158, 158, 100);
					font-size: 24rpx;
				}
			}
			.desc{
				padding: 0rpx 25rpx;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
				font-size: 30rpx;
			}		
		}
		.middle{
			padding: 0rpx 25rpx;
			.head{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;
				.name{
					color: rgba(74, 71, 71, 100);
					font-size: 36rpx;
					font-weight: bold;
				}
				.control{
					display: flex;
					align-items: center;
					color: rgba(158, 158, 158, 100);
					font-size: 28rpx;
					.img{
						display: inline-block;
						width: 25rpx;
						height: 25rpx;
						margin-left: 10rpx;
					}
				}
			}
			.memberlist{
				// max-height: 330rpx;
				// overflow: hidden;
				width: 100%;
				.memberitem{
					display: inline-block;			
					.img{
						margin: 20rpx 20rpx 0 20rpx;
						position: relative;
						box-sizing: border-box;
						.myimg{
							width: 88rpx;
							height: 88rpx;
							border-radius: 14rpx;
							border: 4rpx solid rgba(52, 199, 88, 100);
						}
						.delete{
							position: absolute;
							top: 0;
							right: 0;
							transform: translate(39%,-33%);
							opacity: 1;
							.deleteimg{
								display: block;
								width: 36rpx;
								height: 36rpx;
								background-color: #FFFFFF;
								border-radius: 50%;
							}
						}
					}
					.name{
						width: 136rpx;
						padding: 0 20rpx;
						box-sizing: border-box;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						color: rgba(158, 158, 158, 100);
						font-size: 26rpx;
						text-align: center;
					}
				}
			}
			.groupinfodetail{
				margin-top: 15rpx;
				.info{
					height: 80rpx;
					box-sizing: border-box;
					width: 100%;
					padding: 12rpx 0 0 0;
					display: flex;
					align-items: center;
					.text{
						font-size: 30rpx;
						width: 100rpx;
						flex: 0 0 100rpx;
						&.norecived{
							width: 150rpx;
							flex: 0 0 150rpx;
						}
					}
					.middle{
						flex: 1;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						color: rgba(158, 158, 158, 100);
						font-size: 28rpx;
						.img{
							box-sizing: border-box;
							width: 80rpx;
							height: 80rpx;
							border-radius: 14rpx;
							border: 4rpx solid rgba(52, 199, 88, 100);
						}
					}
					.right{
						width: 25rpx;
						height: 25rpx;
						flex: 0 0 25rpx;
						&.myswitch{
							width: 82rpx;
							// height: 44rpx;
							flex: 0 0 82rpx;
						}
					}
				}
			}
		}
		.bottom{
			// position: absolute;
			// bottom: 20rpx;
			
			width: 550rpx;
			height: 80rpx;
			line-height: 88rpx;
			border-radius: 32rpx;
			background-color: #F2F2F7;
			text-align: center;
			margin: 0 auto;
			margin-top: 100rpx;
			margin-bottom: 30rpx;
			// left: 50%;
			// transform: translateX(-50%);
			color: #FF2D55;
		}
	}
	.fade-enter-active, .fade-leave-active {
	  transition: opacity .5s;
	}
	.fade-enter, .fade-leave-to  {
	  opacity: 0;
	}
}
</style>
